<template>
  <div class="head">
    <div>父组件传递的值：{{ ibjectStr }}</div>
    <div class="marginTop">
      <span @click="handleTime">学习的响应：</span>
      <div>{{ num }}</div>
      <div>{{ obj }}</div>
      <div>{{ time }}</div>
    </div>
  </div>
</template>

<script>
import { inject, reactive, ref, toRefs } from 'vue';
export default {
  setup() {
    // inject获取父级组件中 provide 的 props 属性
    let ibjectStr = inject('str');

    // let num = 0; // 视图不更新
    let num = ref(0); // 视图更新

    setInterval(() => {
      num.value++; // 注意setUp内部访问响应式变量是 data.value
    }, 1000);

    // let obj = { num: 0 }; // 视图不更新
    let obj = reactive({ num: 0 }); // 视图更新

    setInterval(() => {
      obj.num++;
      // console.log(obj); // 数据更新
    }, 1000);

    let time = toRefs('');
    setInterval(() => {
      let dateTime = new Date();
      time.value = dateTime.toLocaleString();
      // console.log(time.value); // 数据更新
    }, 1000);

    return {
      ibjectStr,
      num,
      obj,
      time,
    };
  },
  methods: {
    handleTime() {
      let time = new Date();
      let dateTime = this.formateDateTime(time, 'yyyy-MM-dd');
      console.log(dateTime);
      let dateTime2 = this.formateDateTime(time, 'yyyy-MM-dd hh:mm:ss');
      console.log(dateTime2);
    },
    // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
    // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
    formateDateTime(time, fmt) {
      let o = {
        'M+': time.getMonth() + 1, // 月份
        'd+': time.getDate(), // 日
        'h+': time.getHours(), // 小时
        'm+': time.getMinutes(), // 分
        's+': time.getSeconds(), // 秒
        'q+': Math.floor((time.getMonth() + 3) / 3), // 季度
        S: time.getMilliseconds(), // 毫秒
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (time.getFullYear() + '').substr(4 - RegExp.$1.length)
        );
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ('00' + o[k]).substr(('' + o[k]).length)
          );
      }
      return fmt;
    },
  },
};
</script>

<style lang="less" scoped>
.head {
  width: 100%;
  padding: 20px;
  background-color: aquamarine;
  .marginTop {
    margin-top: 20px;
  }
}
</style>
